<script setup lang="ts">
import {list} from '@/api/team-introduction.ts'
import {onMounted, ref} from "vue";
import {useCounterStore} from "@/stores/counter.ts";
const counter = useCounterStore()
const baseUrl=import.meta.env.VITE_API_URL;
onMounted(() => {
  getTeamintroduction()
  counter.scrollToTop()
})
const teamintroduction=ref()
const getTeamintroduction = ()=>{
  list({}).then((res)=>{
    teamintroduction.value = res.data[0]
  })
}
</script>

<template>
  <div>
    <el-carousel class="el-carousel__item" :autoplay="false" indicator-position="none" arrow="never">
      <el-carousel-item v-for="item in 1" :key="item">
        <h3 class="small">
          <img  v-img-lazy="baseUrl+teamintroduction.teamImg" v-if="teamintroduction && teamintroduction.teamImg" />
          <div class="shuffingtext">
            <span v-if="teamintroduction && teamintroduction.textIntroduction">{{teamintroduction.textIntroduction}}</span>
            <span  v-if="teamintroduction && teamintroduction.textIntroductionSmall" class="spansmall">
              {{teamintroduction.textIntroductionSmall}}
            </span>
          </div>
        </h3>
      </el-carousel-item>
    </el-carousel>
    <div class="team-info">
      <h1 class="title" >
<!--        <el-icon color="green" size="25" style="margin-right: 5px"><DArrowLeft /></el-icon>-->
        团队介绍
<!--        <el-icon color="green" size="25"  style="margin-left: 5px"><DArrowRight /></el-icon>-->
      </h1>
      <span style="padding-left: 8ch">{{teamintroduction && teamintroduction.introduction ? teamintroduction.introduction : ''}}</span>
      <div style="margin-top: 20px">
        <h2  class="title" >
<!--          <el-icon size="25" color="green"  style="margin-right: 5px"><DArrowLeft /></el-icon>-->
          团队氛围
<!--          <el-icon color="green" size="25"  style="margin-left: 5px"><DArrowRight /></el-icon>-->
        </h2>
        <div style="width: 100%;display: flex;justify-content: center">
          <div class="flex-container">
            <img v-if="teamintroduction && teamintroduction.introductionImg" v-for="item in teamintroduction.introductionImg.split(',')" v-img-lazy="baseUrl+item"/>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<style scoped>
.spansmall{
  font-size: 20px;
  //margin-top: 10px;
  color: #82aa82;
  font-weight: 500;
}
.shuffingtext{
  display: flex;align-items: center;flex-direction: column
}
.flex-container {
  width:70%;
  height: 100%;
  display: flex;
  flex-wrap: wrap; /* 允许项目换行 */
  align-items: center; /* 垂直居中 */
}

.flex-container img {
  width: 32%; /* 调整图片宽度 */
  margin: 5px; /* 图片之间的外边距 */
  height: 500px;
  border-radius: 3px;
  object-fit: cover;
}
.title{
  text-align: center;margin-bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-info{
  margin-top: 50px;
  margin-bottom: 50px;
}
.el-carousel__item {
  height: 100vh;
}
.el-carousel__item h3 {
  color: #694747;
  font-size: 14px;
  opacity: 1;
  line-height: 300px;
  margin: 0;
  text-align: center;
}
.el-carousel__item h3 div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  //font: italic bold 40px '新宋体';
  color: #a1a111;
  font-weight: bolder;
  //text-shadow: 2px 2px 4px #000000; /* 水平偏移2px，垂直偏移2px，模糊半径4px，颜色为黑色 */
}
.small  {
  width: 100%;
  height: 100%;
}
.small img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
@media (max-width: 850px) {
  .flex-container img {
    height: 350px;
  }
}
@media (max-width: 450px) {
  .flex-container img {
    height: 120px;
  }
}
@media (max-width: 540px) {
  .el-carousel__item h3 div{
    font-size: 16px;
  }
  .spansmall{
    font-size: 14px;
  }
  .flex-container{
    width:100%;
  }
  .flex-container img{
    width: 47%;
  }
}
</style>